<!-- 语音遮罩层 -->
<template>
  <view class="soundBox">
    <span
      class="btn"
      type="default" 
      @touchstart="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"
    >
      按住 说话
    </span>

    <!-- 语音遮罩层 -->
    <view class="voice-mask" v-show="mask">
    	<!--语音条 -->
    	<!-- <view class="voice-bar" :class=" { voiceDel: needCancel } "> -->
    	<view class="voice-bar" v-if="!needCancel">
    		<!-- <image src="@/static/images/chating_footer_audio_recording.png" class="voice-volume" :class=" { volumeDel: needCancel } "></image> -->
        <div class="loader">
          <span />
          <span />
          <span />
          <span />
          <span />
          <span />
          <span />
          <span />
          <span />
          <span />
          <span />
          <span />
          <span />
          <span />
          <span />
        </div>
    		<view class="trangle-bottom" :class=" { trangleDel: needCancel } "></view>
    	</view>
    	<!-- 底部区域 -->
    	<view class="voice-send">
    		<!-- 取消和转文字图标 -->
    		<view class="voice-middle-wrapper">
    			<!-- 取消 -->
    			<view class="voice-left-wrapper">
    				<view class="cancel-del" :class=" { delTip: needCancel } ">松开 取消</view>
    				<view class="voice-middle-inner close" :class=" { bigger: needCancel } ">
              <div class="close-icon"></div>
    				</view>
    			</view>
    			<!-- 转文字 -->
    			<!-- <view class="voice-middle-inner to-text">
    				<text class="wen">文</text>
    			</view> -->
    			<view class="send-tip" :class=" { sendTipNone: needCancel } ">松开 发送</view>
    		</view>	
    		<!-- 底部语音按钮 -->
    		<view class="mask-bottom">
    			<image src="@/static/images/chating_footer_recording.png"></image>
    		</view>
    	</view>	
    </view>
  </view>
</template>

<script>
import IMSDK, {
  IMMethods,
} from "openim-uniapp-polyfill";
import { getPurePath } from "@/util/common";

const recorderManager = uni.getRecorderManager();
const innerAudioContext = uni.createInnerAudioContext();

export default {
  data() {
    return {
      mask: false,
      needCancel: false,
      length: 0, // 音频时长
      startX: 0,
      startY: 0,
      timer: null,
    };
  },
  methods: {
    handleTouchStart(e) {
      // 开始录制语音
      this.mask = true;
      recorderManager.start();
      this.length = 1;
      this.startX = e.touches?.[0]?.pageX;
      this.startY = e.touches?.[0]?.pageY;
      this.timer = setInterval(() => {
        this.length += 1;
        if (this.length >= 60) {
          clearInterval(this.timer);
          this.handleTouchEnd()
        }
      }, 1000);
    },
    handleTouchMove(e) {
      // 语音录制时滑动事件
      if (this.startX - e.touches?.[0]?.pageX > 14 && this.startY - e.touches?.[0]?.pageY > 50) {
        this.needCancel = true;
      } else {
        this.needCancel = false;
      }
    },
    handleTouchEnd() {
      // 语音录制结束
      this.mask = false;
      clearInterval(this.timer);
      recorderManager.stop();
      recorderManager.onStop((res) => {
        console.log(res,'resresres');
        const message = {
          tempFilePath: res.tempFilePath,
          length: this.length
        };
        if (!this.needCancel) {
          this.inputSubmit(message, 2);
        } else {
           // 删除录音文件
          uni.removeSavedFile({
            filePath: res.tempFilePath,
            success: function (res) {
              console.log('删除录音文件成功', res);
            },
            fail: function (err) {
              console.log('删除录音文件失败', err);
            }
          });
        }
        this.needCancel = false
      });
    },
    async inputSubmit(msg, types) {
      if (msg.types === 0 && this.inputText == '') return;

      this.$emit('sub', msg, types);
      
      const purePath = getPurePath(msg.tempFilePath);
      const message = await IMSDK.asyncApi(
        IMMethods.CreateSoundMessageFromFullPath,
        IMSDK.uuid(),
        {
          soundPath: purePath,
          duration: this.length
        }
      )
      console.log(message,'message');
      this.$emit("sendMessage", message);

      if (this.inputText) {
        this.inputText = '';
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@keyframes load {
  0% {
    background: #ccc;
    height: 10%;
  }

  50% {
    background: #444;
    height: 100%;
  }

  100% {
    background: #ccc;
    height: 10%;
  }
}
.soundBox, .btn {
  @include centerBox();
  width: 100%;
  height: 30px;
  flex: none;
}
.voice-mask{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  /* display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center; */
  background-color: rgba(0,0,0,0.8);
  z-index: 1111;
}
.voice-bar{
  @include centerBox();
  position: absolute;
  left:50%;
  top: 50%;
  transform: translate(-50%,-30%);
  height:150rpx;
  background-color:#51ff50;
  border-radius: 26rpx;
  margin-bottom: 220rpx;
  width: 300rpx;
  
  .loader {
    @include centerBox();
    margin: auto;
    width: 60%;
    height: 40rpx;

    span {
      background: #ccc;
      width: 2px;
      height: 10%;
      border-radius: 14px;
      margin-right: 5px;
    }
    span:last-child {
      margin-right: 0px;
    }
    span:nth-child(1) {
      animation: load 2.5s 1.4s infinite linear;
    }
    span:nth-child(2) {
      animation: load 2.5s 1.2s infinite linear;
    }
    span:nth-child(3) {
      animation: load 2.5s 1s infinite linear;
    }
    span:nth-child(4) {
      animation: load 2.5s 0.8s infinite linear;
    }
    span:nth-child(5) {
      animation: load 2.5s 0.6s infinite linear;
    }
    span:nth-child(6) {
      animation: load 2.5s 0.4s infinite linear;
    }
    span:nth-child(7) {
      animation: load 2.5s 0.2s infinite linear;
    }
    span:nth-child(8) {
      animation: load 2.5s 0s infinite linear;
    }
    span:nth-child(9) {
      animation: load 2.5s 0.2s infinite linear;
    }
    span:nth-child(10) {
      animation: load 2.5s 0.4s infinite linear;
    }
    span:nth-child(11) {
      animation: load 2.5s 0.6s infinite linear;
    }
    span:nth-child(12) {
      animation: load 2.5s 0.8s infinite linear;
    }
    span:nth-child(13) {
      animation: load 2.5s 1s infinite linear;
    }
    span:nth-child(14) {
      animation: load 2.5s 1.2s infinite linear;
    }
    span:nth-child(15) {
      animation: load 2.5s 1.4s infinite linear;
    }
  }
}
.voiceDel{
  left:80rpx;
  top: 50%;
  width: 170rpx !important;
  transform: translateX(0%);
  transform: translateY(-30%);
}
.voice-volume{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 160rpx;
  height: 36rpx;
}
.volumeDel{
  width: 80rpx;
}
.trangle-bottom{
  position: absolute;
  bottom: -38rpx;
  left:50%;
  transform: translateX(-50%);
  border-width: 20rpx;
  border-style: solid;
  border-color: #51FF50 transparent transparent transparent;
}
.trangleDel{
  border-color: red transparent transparent transparent;
}
.voice-send{
  position: absolute;
  bottom: 0;
  width: 100%;
}
.voice-middle-wrapper{
  width: 100%;
  display: flex;
  position:relative;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40rpx;
}
.voice-left-wrapper{
  @include centerBox();
  flex-wrap: wrap;
  width: 140rpx;
  text-align: center;
  margin-left: 80rpx;
}
.cancel-del{
  @include centerBox();
  width: 100%;
  display:none;
  &.delTip{
    display:block;
    color:#bfbfbf;
    margin: 0 0 18rpx 0;
  }
}
.voice-middle-inner{
  @include centerBox();
  background-color: rgba(0,0,0,0.2);
  height: 140rpx;
  width: 100%;
  border-radius: 50%;

  &.bigger{
    background-color: #fff;

    .close-icon {
      &:before, &:after {
        background-color: #000;
      }
    }
  }

  &.close{
    // transform: rotate(350deg);
  }
  
  .close-icon{
    @include centerBox();
    width: 30rpx;
    height: 30rpx;
    position: relative;

    /* 定义叉的线条样式 */
    &:before, &:after {
      content: '';
      position: absolute;
      width: 2px;
      height: 100%;
      background-color: #fff;
    }

    /* 左斜线 */
    &:before {
      transform: rotate(45deg);
    }

    /* 右斜线 */
    &:after {
      transform: rotate(-45deg);
    }
  }
}
.to-text{
  transform: rotate(10deg);
  margin-right: 80rpx;
}
.wen{
  font-size: 40rpx;
  color:#bfbfbf;
}
.send-tip{
  position: absolute;
  left: 50%;
  bottom:0rpx;
  transform: translate(-50%,36%);
  color:#bfbfbf;
}
.sendTipNone{
  display: none;
}
.mask-bottom{
  position: relative;
  width: 100%;
  height:190rpx;
  border-top: #BABABB 8rpx solid;
  border-radius: 300rpx 300rpx 0 0;
  background-image: linear-gradient(#949794,#e1e3e1);
}
.mask-bottom image{
  position: absolute;
  width: 60rpx;
  height: 60rpx;
  top: 0;
  right:0;
  bottom: 0;
  left: 0;
  margin: auto;
}

</style>